<script lang="tsx" setup>
import { reactive, ref } from 'vue';
import { getMeNotice, getPageList, readNotice } from '@/service/api/system/notice';
import type { NoticeVO } from '@/service/types/system';

const options = ref([
  {
    label: '全部',
    key: 'all'
  },
  {
    label: '未读',
    key: 'unread'
  },
  {
    label: '已读',
    key: 'read'
  }
]);
const handleSelect = () => {};

type noticeType = {
  code: number;
  msg: string;
  rows: Array<NoticeVO>;
  total: number;
};

const notice = ref<noticeType>();
const show = ref(false);
const listParams = ref<{
  pageNum: number;
  pageSize: number;
}>({
  pageNum: 1,
  pageSize: 5
});

const getNoticePageList = async () => {
  show.value = true;
  const { data, error } = await getMeNotice(listParams.value);
  show.value = false;
  if (!error) {
    notice.value = data as unknown as noticeType;
  }
};
const nextPage = (page: number) => {
  listParams.value.pageNum = page;
  getNoticePageList();
};
getNoticePageList();
const handleRead = async (id: number, status: string) => {
  // 判断当前的是否是微阅读
  if (status === '1') {
    return;
  }
  const { error } = await readNotice(id);
  if (!error) {
    getNoticePageList();
  }
};

const model: {
  range: any;
  status: number | string;
} = reactive({
  status: ''
});
</script>

<template>
  <div>
    <NCard :bordered="false" class="min-500px">
      <template #header>
        <NDropdown trigger="click" :options="options" @select="handleSelect">
          <NButton text tag="a">
            <NSpace :size="4" justify="center" align="center">
              全部
              <SvgIcon icon="icons8:angle-down" />
            </NSpace>
          </NButton>
        </NDropdown>
      </template>
      <template #header-extra>
        <NSpace>
          <NPopover trigger="click" style="max-width: 330px; padding: 0px">
            <template #trigger>
              <NButton quaternary size="small">
                <template #icon>
                  <SvgIcon icon="flowbite:filter-outline" />
                </template>
              </NButton>
            </template>
            <NCard
              :bordered="false"
              style="padding: 0px"
              content-style="margin-bottom:30px"
              footer-style="padding:8px;border-top: 1px solid var(--n-border-color);"
              footer-class="filter-footer"
            >
              <NDatePicker v-model:value="model.range" type="daterange" clearable />
              <template #footer>
                <NSpace justify="end">
                  <NButton size="small">取消</NButton>
                  <NButton size="small" type="primary">确认</NButton>
                </NSpace>
              </template>
            </NCard>
          </NPopover>
          <NButton size="small">全部已读</NButton>
        </NSpace>
      </template>
      <template #footer>
        <div class="flex flex-justify-between flex-items-center">
          <div class="font-size-12px text-gray-500">提示：如果内容太长会折叠，点击文本可以展开</div>
          <NPagination
            v-if="notice?.total >= 5"
            v-model:page="listParams.pageNum"
            v-model:page-size="listParams.pageSize"
            :item-count="notice?.total"
            simple
            @update:page="nextPage"
          />
        </div>
      </template>
      <div v-if="notice?.rows.length === 0">
        <Empty />
      </div>
      <div v-else>
        <NScrollbar style="height: calc(700px - 126px)">
          <NSpin :show="show">
            <div
              v-for="(item, index) in notice?.rows"
              :key="index"
              class="cursor-pointer"
              @click="handleRead(item.id as number,item.status as string)"
            >
              <NThing>
                <template #avatar>
                  <!-- <NAvatar> -->
                  <SvgIcon class="font-size-35px" local-icon="notice" />
                  <!-- </NAvatar> -->
                </template>
                <template #header>
                  <NBadge v-if="item?.status == '0'" dot :offset="[5, 10]">
                    <div class="mt-5px font-size-14px">{{ item.noticeTitle }}</div>
                  </NBadge>
                  <div v-else class="mt-5px font-size-14px">{{ item.noticeTitle }}</div>
                </template>
                <!--
 <template #header-extra>
                  <NButton size="small">未读</NButton>
                </template>
-->

                <template #description>
                  <div class="font-size-12px text-gray-400">{{ item.createTime }}</div>
                </template>
                <div class="font-size-14px">
                  <NEllipsis :line-clamp="2" expand-trigger="click" :tooltip="false">
                    {{ item.noticeContent }}
                  </NEllipsis>
                </div>
              </NThing>
              <NDivider />
            </div>
            <div class="text-center font-size-12px text-gray-500">只近保留六个月</div>
          </NSpin>
        </NScrollbar>
      </div>
    </NCard>
  </div>
</template>

<style lang="scss" scoped>
.filter-footer {
  border-top: 1px solid var(--n-tab-border-color);
}
</style>
